<!--
 * @Author: your name
 * @Date: 2021-11-04 21:45:01
 * @LastEditTime: 2021-11-07 12:08:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-app2\src\components\Tabbar.vue
-->
<template>
    

    <!-- 默认显示的地址 -->
    <div class="vg">
        <van-cell-group inset @click="show=true">
            <van-cell>
                <div class="title">服务地址：</div>
                <div class="name">名字：{{user_address.name}}</div>
                <span class="phone">号码：{{user_address.tel}}</span>
                <div class="address">地址：{{user_address.address}}</div>
            </van-cell>
        </van-cell-group>
    </div>
    {{user_address}}

    <!-- 地址列表模态框 -->
    <van-action-sheet
        v-model:show="show"
        cancel-text="取消"
        description="选择地址"
        close-on-click-action
    >
    <van-address-list
        v-model="chosenAddressId"
        :list="add_list"
        :disabled-list="disabledList"
        @select="onSelect"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        @add="updateAddress"
        @edit="updateAddress"
    />
    </van-action-sheet>

    <!-- 添加修改地址的模态框 -->
    
    <van-action-sheet v-model:show="add_dress_show"  @select="onSelect" title="修改/新增地址">
            {{show_address}}
            <van-address-edit
                :area-list="areaList"
                :address-info="show_address"
                show-delete
                show-area
                show-set-default
                @change-area="get"
                @change-detail="getdetail"
                show-search-result="true"
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
            />
    </van-action-sheet>
    

   


        
    
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import { get, post } from '../utils/axios';
import { areaList } from '@vant/area-data';

export default {
    
    setup() {
        
        const onAdd = () => Toast('新增地址');
        const onEdit = (item, index) => Toast('编辑地址:' + index);


        return {
        onAdd,
        onEdit,
        areaList,
        
        
        };
    },

    data(){
        return{
            chosenAddressId:"",//默认显示的地址项Id
            add_list:[],//保存地址
            user_address:[],//用户当前选择的地址
            show:false,//控制是否地址弹出框显示 
            add_dress_show:false,//添加修改地址显示 
            show_address:{},//添加删除地址时显示的地址  
            province:'',//省份
            detail:'',//详细地址
        }
    },
    methods:{
        // 获取地址列表
        getAddList(){
            get('/address/pageQuery',{page:1,pageSize:999}).then((res)=>{
                console.log(res.data.list)
                res.data.list.forEach((item)=>{
                    let obj={};
                    obj.id=item.id;
                    obj.name=item.username;
                    obj.tel=item.telephone;
                    obj.province=item.province;
                    obj.city=item.city;
                    obj.area=item.area;
                    obj.address=item.address;
                    // obj.address=item.province+"-"+item.city+"-"+item.area+"-"+item.address;
                    
                    this.add_list.push(obj);
                });
                // 默认显示的地址
                this.user_address=this.add_list[0];
                this.chosenAddressId=this.add_list[0].id;
                this.$emit('getAddreId',this.chosenAddressId)
            })
        },
        // 选中地址
        onSelect(value){
            this.user_address=value
            this.show=false
            this.chosenAddressId=value.id
            this.$emit('getAddreId',this.user_address.id)
        },

        // 修改保存地址
        updateAddress(value){
            this.add_dress_show=true;
            this.show=false;
            console.log(value)

            this.show_address=value
            let str_temp=value.address;
            let arr_temp=str_temp.split('-')
            // console.log(Object.prototype.toString.call(arr_temp))
            // console.log(arr_temp)
            this.show_address.addressDetail=arr_temp[3];
            this.show_address.province=arr_temp[0];
            this.show_address.city=arr_temp[1];
            this.show_address.county=arr_temp[2];
            
        },

        // 保存修改地址
        onSave(value){
            console.log(value)
            this.show_address.id=this.chosenAddressId;
            this.show_address.username=value.name;
            this.show_address.telephone=value.tel;
            this.show_address.province=this.province
            this.show_address.city=value.city
            this.show_address.area=value.county;
            this.show_address.address=this.province+'-'+value.city+'-'+value.county+'-'+this.detail;
            if(value.city=='' || value.county==''){
                alert('请输入完整地址')
            }else{
                post('/address/saveOrUpdate',this.show_address).then((res)=>{
                    console.log(res)
                    this.add_dress_show=false
                })
            }
            
            
        },
        // 获取省
        get(value){
            // 返回省份 普通保存得不到省份数据
            console.log(value[0].name)
            this.province=value[0].name;
            // return value[0].name;
            
        },
        // 获取详细地区
        getdetail(value){
            console.log(value)
            this.detail=value
        }
    

    },

    created(){
        this.getAddList();
        
    },

    
};
</script>

<style scoped>
   
    /deep/ .van-cell-group{
        border-radius: 15px;
        box-shadow: 1px 2px 2px 2px rgb(224, 224, 224);
        background-color: rgb(244, 248, 252);
        border: 1px solid rgb(204, 204, 204);
        margin-top: 3px;
    }

    .title{
        font-family: '黑体';
        font-size: 18px;
        color: rgb(127, 173, 216);
        margin-bottom: 3px;
    }
    .van-cell__title{
        text-align: left;
    }
    .van-cell__value {
        width: 30%;
        flex: none;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        background-color: #fff;
    }

</style>